<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>审核问卷</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>
    <link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.ico">
    <script src="/js/zepto.min.js"></script>

    <style>
        body {
            background: #f3f3f3;
        }

        .weui-header {
            background-color: #fff;
        }
    /* 标题 */
    .weui-header-title {
        color: black !important;
      
    }

    /* 列表 */

    .list_item {
      
        width: 94%;
        border-radius: 8px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 12px;
        box-shadow: 0 5px 3px rgba(126, 126, 126, 0.3)
    }
    .list_item .weui-flex{
        height: 64px;
        border-radius: 8px;
    }

    .pre {
        flex: 2;
        /* background-color: pink; */
    }

    .bel {
        flex: 1;
         /*background-color: yellow;*/
        background: url("/img/button_ico_no.png") no-repeat;
        background-size: contain;
        background-position: 15px 0;
    }

    h3 {
        box-sizing: border-box;
        padding-left:16px;
        padding-top: 6px;
        font-weight: 300;
        width: 190px;
        overflow: hidden;    
        text-overflow:ellipsis;    
        white-space: nowrap;  
    }

    .discr {
        box-sizing: border-box;
        font-size: 17px;
        line-height: 20px;
        padding-left: 16px;
        color: #ccc;
        /* background-color: yellow; */
        width: 190px;
        overflow: hidden;    
        text-overflow:ellipsis;    
        white-space: nowrap;  
    }

    .bel_bg {

        box-sizing: border-box;
        text-align: center;
        padding-left: 30px;
        color: #fff;
        line-height: 64px;
        letter-spacing: 5px;
        /*background-color: yellow;*/
        
        font-size: 22px;
    }



    .active {
  
        background: url("/img/button_ico.png") no-repeat;
        background-size: contain;
        float: right;
        background-position: 14px 0;
    }

    .active_shadow {
        box-shadow: 2px 7px 3px rgba(34, 34, 34, 0.3);
       
    }
    </style>
</head>
<body>
 
<!-- 头部 -->
<div class="weui-header "> 
    <div class="weui-header-left"> <a   class="icon icon-109 f-black" th:href='@{/admin/return_management_page(admin_token=${adminToken})}'>返回</a>  </div>
     <h1 class="weui-header-title">问卷列表</h1>
</div>

<!-- 列表 -->
<div class="list">
    <div class="list_item">
            <div class="weui-flex">
                <div class="weui-flex__item pre"><h3>大学生睡不睡觉</h3><div class="placeholder discr">不睡觉</div></div>
                <div class="weui-flex__item bel"><div class="placeholder bel_bg">审核</div></div>
            </div>
    </div>


    <div class="list_item">
            <div class="weui-flex">
                <div class="weui-flex__item pre"><h3>大学生睡不睡觉</h3><div class="placeholder discr">不睡觉</div></div>
                <div class="weui-flex__item bel"><div class="placeholder bel_bg">审核</div></div>
            </div>
    </div>

    
    <div class="list_item">
            <div class="weui-flex">
                <div class="weui-flex__item pre"><h3>大学生睡不睡觉</h3><div class="placeholder discr">不睡觉</div></div>
                <div class="weui-flex__item bel"><div class="placeholder bel_bg">审核</div></div>
            </div>
    </div>

    
    <div class="list_item">
            <div class="weui-flex">
                <div class="weui-flex__item pre"><h3>大学生睡不睡觉</h3><div class="placeholder discr">不睡觉</div></div>
                <div class="weui-flex__item bel"><div class="placeholder bel_bg">审核</div></div>
            </div>
    </div>
</div>


<script src="js/jquery-1.9.1.js"></script>
<script>
    $(
        function(){

            $('.bel').click(function () {
        

        $(this).toggleClass('active');

     
     })


     
// 按下阴影
$('.list_item').click(function () {
        $(this).toggleClass('active_shadow');
        $(this).siblings().removeClass('active_shadow');
     })   
 

    })


 
</script>


</body>
</html>